<template>
    <div class="home-container">
        <el-container>
            <!-- 左侧栏 -->
            <el-aside width="200px">
                <Aside />
            </el-aside>
            <el-container>
                <!-- 首部 -->
                <!-- <el-header style="padding:0px;">
                    <Header></Header>
                </el-header> -->
                <!-- 主体 -->
                <el-main>
                    <!-- 面包屑导航 -->
                    <el-breadcrumb v-if="showBreadCrumb" separator-class="el-icon-arrow-right" class="breadcrumb">
                        <el-breadcrumb-item v-for="(route, index) in breadcrumbRoutes" :to="{ path: route.path }">{{
                        route.name
                        }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!-- 路由部分 -->
                    <router-view></router-view>
                    <el-image v-show="$route.name === 'Admin'" style="width:100%; height:80%"
                        src="/src/assets/welcome.gif"></el-image>
                </el-main>
                <!-- 尾部 -->
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>

    </div>
</template>

<script>
import Aside from '@/components/Aside.vue';
import Header from '@/components/Header.vue';
export default {
    components: { Aside, Header },
    name: 'Home',
    data() {
        return {
            showBreadCrumb: false,  // 是否显示面包屑导航
            isCollapse: true,
            breadcrumbRoutes: [],     // 面包屑路由
        };
    },
    created() {
    },
    mounted() {
        // 设置到全局总线, 提供其他子路由进行调用
        this.$bus.$on('loadBreadcrumb', () => this.loadBreadcrumb())
        this.$bus.$on('closeBreadcumnb', () => this.loadBreadcrumb())
        this.loadBreadcrumb()
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 关闭面包屑导航的显示
        closeBreadcumnb(){
            this.breadcrumbRoutes = []
            this.showBreadCrumb = false
        },
        // 加载面包屑导航, 通过路由
        loadBreadcrumb() {
            this.breadcrumbRoutes = []
            if (this.$route.name === 'Admin') {         // 如果是默认页面, 就不显示面包屑导航
                this.showBreadCrumb = false
            } else {
                this.$route.matched.forEach(
                    (r) => {
                        this.breadcrumbRoutes.push({
                            name: r.meta.name,
                            path: r.path
                        })
                    }
                )
                this.showBreadCrumb = true
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.breadcrumb {
    // 主体部分的面包屑导航
    margin-top: 10px;
    margin-bottom: 20px;
}
</style>